<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
<ul class="list">
    <li>li 1</li>
    <li>li 2</li>
    <li>li 3</li>
    <li>li 4</li>
</ul>

<script>
// 三个点 ...

/* // 扩展运算符（展开运算符）...
// 可以将 字符串、数组、类数组（元素集合/arguments）、Set、Map 等数据展开成 逗号隔开的参数序列
function fn(a,b,c,d){
    // a,b,c,d -> 逗号隔开的参数序列
}

let str = 'abcde';
console.log( ...str );// a b c d e
console.log( 'a','b','c','d','e' );// a b c d e

let arr = ['a1','a2','a3','a4'];
console.log( ...arr );// a1 a2 a3 a4
console.log( 'a1','a2','a3','a4' );// a1 a2 a3 a4

let lis = document.querySelectorAll('.list li');
console.log( ...lis );// li,li,li,li

let obj = {
    name: '小明',
    age: 23,
    sex: '女'
}
// console.log( ...obj );// 报错，对象没有部署迭代器
// console.log( {...obj} );// {name: '小明', age: 23, sex: '女'} 拷贝对象的键值对

let obj2 = {
    money: 123456
}

let obj3 = {...obj,...obj2};
console.log( obj3 );// {name: '小明', age: 23, sex: '女', money: 123456}

let arr1 = [1,2,3];
let arr2 = [4,5,6];
let arr3 = [...arr1,...arr2];
console.log( arr3 );// [1, 2, 3, 4, 5, 6] */


// rest运算符（收集运算符/剩余参数）...
// let {a,b,...c} = {a:1,b:2,c:3,d:4};
// console.log( a );// 1
// console.log( b );// 2
// console.log( c );// {c: 3, d: 4}

// let [a,b,...c] = [1,2,3,4,5,6];
// console.log( a );// 1
// console.log( b );// 2
// console.log( c );// [3,4,5,6]


let data = [1,2,3,4];
function test(arr){
    arr.forEach((item)=>{
        console.log( item );
    })
}
test(data);

function test2(a,b,c,d){
    console.log( a+b+c+d );
}
test2(data[0],data[1],data[2],data[3]);
test2(...data);// ...是展开运算符

function test3(...arr){// ...是rest运算符
    arr.forEach((item)=>{
        console.log( item );
    })
}
test3(...data);// ...是展开运算符
test3(1,2,3,4);

</script>
</body>
</html>